<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>案例详情</title>
    <link rel="stylesheet" href="../案例详情/案例详情.css" />
    <!-- swiper -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.css"
    />
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
    <!-- vue语法 -->
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div id="demo1">
      <!-- 头部 -->
      <div class="box1-all">
        <div class="box1">
          <img src="../../img/2.png" alt="" />
          <div class="box1-right">
            <img src="../../img/3.png" alt="" />
            <div>咨询我们:12345678900</div>
          </div>
        </div>
      </div>

      <!-- 轮播 -->
      <div class="carousel">
        <div class="carousel-top">
          <div class="one"><a href="../首页/首页.html">首页</a></div>
          <div class="one">
            <a href="../网站开发/网站开发.html">网站开发</a>
          </div>
          <div class="one"><a href="../APP开发/APP开发.html">APP开发</a></div>
          <div class="one">
            <a href="../小程序开发/小程序开发.html">小程序开发</a>
          </div>
          <div class="one"><a href="../案例/案例.html">案例</a></div>
          <div class="one">
            <a href="../关于我们/关于我们.html">关于我们</a>
          </div>
        </div>
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="image" src="../../img/1.png" alt="" />
            </div>
          </div>
          <!--如果需要滚动条-->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <!-- 中国风背景设计图 -->
      <div class="site">
        <div class="industry1">首页>案例>手机/APP开发>详情</div>
        <div class="all">
          <div>中国风背景设计图</div>
          <div><img src="../../img/中国风.png" alt="" /></div>
          <div class="color">
            就是大家未来的生活习惯而不是单单一种生活方式。你可以畅想一下，你从梦乡醒来，第一件事还是拿起手机，通过”天购”预定了肯德基早餐一它是免费的;然后洗漱出门，楼下已经有一辆出租车在等你-它是你通过”天购”预约的，同样，它也是免费的。临近下班，”天购提示”提醒你今天是老婆的生日，于是你还是拿起手机通过”天购”预定了今晚的王品台塑牛排、百老汇影城的电影、喜来登酒店的温馨套房…这些还都是免费的!
          </div>
          <div class="color">
            就是大家未来的生活习惯而不是单单一种生活方式。你可以畅想一下，你从梦乡醒来，第一件事还是拿起手机，通过”天购”预定了肯德基早餐一它是免费的;然后洗漱出门，楼下已经有一辆出租车在等你-它是你通过”天购”预约的，同样，它也是免费的。临近下班，”天购提示”提醒你今天是老婆的生日，于是你还是拿起手机通过”天购”预定了今晚的王品台塑牛排、百老汇影城的电影、喜来登酒店的温馨套房…这些还都是免费的!
          </div>
          <div class="color">
            就是大家未来的生活习惯而不是单单一种生活方式。你可以畅想一下，你从梦乡醒来，第一件事还是拿起手机，通过”天购”预定了肯德基早餐一它是免费的;然后洗漱出门，楼下已经有一辆出租车在等你-它是你通过”天购”预约的，同样，它也是免费的。临近下班，”天购提示”提醒你今天是老婆的生日，于是你还是拿起手机通过”天购”预定了今晚的王品台塑牛排、百老汇影城的电影、喜来登酒店的温馨套房…这些还都是免费的!
          </div>
        </div>
      </div>
      <!-- 热门作品 -->
      <div class="case">
        <div class="industry1">热门相似的作品：</div>
        <div class="bottom-all">
          <div class="bottom" v-for="item in photo" :key="item.id">
            <div><img :src="item.img" alt="" /></div>
            <div class="text">
              <div>{{item.text}}</div>
              <div>{{item.text1}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="below">
        <div class="top">
          <div class="left">
            <div class="change">山东柏瑞设计有限公司</div>
            <div class="change">联系电话:12345678900</div>
            <div class="change">
              地址:济南创新谷2号楼孵化器五楼(长清区海棠路与芙蓉路交叉路口东南)
            </div>
          </div>
          <div class="right">
            <div><img src="../../img/柏瑞.png" alt="" /></div>
            <div>微信公众号</div>
          </div>
        </div>
        <div class="bottom">
          <div>
            Shandong Bairui software Technology Co.
            Ltd.山东柏瑞软件科技有限公司版权所有 鲁ICP备17006298号-1
          </div>
        </div>
      </div>
    </div>
    <script>
      // vue实例
      //使用 vue3 的基本格式
      const { createApp, ref } = Vue;
      const demo1 = createApp({
        // 逻辑代码全部写在setup里面
        // 因为没有语法糖，无论是定义的"变量"或者"函数"都必须！
        // 把名称再多写一次！放在在最后return里面
        setup() {
          //测试变量
          // 列表循环
          const list = ref([
            {
              id: 1,
              img: "../../img/app.png",
              text: "APP/小程序应用解决方案",
              text1:
                "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。",
            },
            {
              id: 2,
              img: "../../img/网站定制.png",
              text: "网站定制",
              text1:
                "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。",
            },
            {
              id: 3,
              img: "../../img/系统开发.png",
              text: "系统开发",
              text1:
                "APP/微信公众平台/小程序定制开发，可提供微商城、活动，红包、投票、签到、业务流、订购、积分、抽奖等功能定制，根据您的需求为您贴身打造。",
            },
          ]);
          // 图片循环
          const photo = ref([
            {
              id: 1,
              img: "../../img/推荐1.png",
              text: "UI新媒体",
              text1: "移动端移动端移动端",
            },
            {
              id: 2,
              img: "../../img/推荐2.png",
              text: "UI新媒体",
              text1: "移动端移动端移动端",
            },
            {
              id: 3,
              img: "../../img/推荐3.png",
              text: "UI新媒体",
              text1: "移动端移动端移动端",
            },
            {
              id: 4,
              img: "../../img/推荐4.png",
              text: "UI新媒体",
              text1: "移动端移动端移动端",
            },
          ]);

          //测试函数
          //h5页面必须把名称return，vite中不需要（重要区别）
          return {
            list,
            photo,
          };
        },
      });
      //应用vue（就是挂载在上面ID绑定的元素上）
      demo1.mount("#demo1");

      // 轮播图
      var mySwiper = new Swiper(".swiper", {
        autoplay: {
          delay: 2000,
        },
        loop: true, //循环模式选项// 如果需要滚动条
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
  </body>
</html>
